<template>
  <div class="left-tab" :style="{width: collapse ? '56px' : '200px'}">
    <vc-side-menu
      class="side-menu"
      :defaultActive="codeLevel2"
      :default-openeds="[title + 'root']"
      v-model:collapse="collapse"
      :useMenuSelect="false"
      showCollapse
      :width="200"
      :collapseWidth="56"
      :menus="[{name: title, code: title + 'root', children: indicatorData, icon:icon}]"
      :menuTopBottomHeight="48"
      :attrMapping="{title: 'name',index: 'code', children: 'children', icon: 'icon'}">
      <template #menuItem="{item, index}">
        <div @click="clickLeftTab(item, index)" class="ml-10px w-full px-30px">{{ item.name }}</div>
      </template>
    </vc-side-menu>
  </div>
  
</template>

<script lang="ts" setup>
interface propsTab {
  title: any;
  codeLevel2: any;
  indicatorData: any;
  icon: any;
}

const collapse = ref(false);

const { title, codeLevel2, indicatorData, icon } = defineProps<propsTab>();

setTimeout(() => {
  console.log(indicatorData, title);
}, 1500);

const emit = defineEmits(['clickLeftTab']);
const clickLeftTab = (item, index) => {
  emit('clickLeftTab', item, index);
};
</script>

<style lang="scss" scoped>
.left-tab {
  width: 200px;
  flex-shrink: 0;

  :deep(.side-menu) {
    .vc-menu-item {
      padding: 0 !important;
    }

    &.vc-side-menu--fixed{
      z-index: 10;
    }
  }
}
</style>
